<template>
    <div>
        <div class="reply-time"><span v-if="level">{{level}}楼</span> {{date}} <span
                @click="deletes" v-if="releaseUserId==statusId && type==0">删除</span><span @click="isreply">回复</span>
        </div>
        <div class="reply-text display-flex-row" v-if="replyshow">
            <div class="reply-text-title">
                回复 {{name}}：
            </div>
            <textarea maxlength="120" v-model="content" @input="descInput" class="reply-text-input flex1"></textarea>
            <span class="reply-input-len">{{remnant}}/120</span>
            <span class="qingkong cur" @click="clear">清空</span>
        </div>
        <div class="fabiao2">
            <div class="fabiao cur" @click="addAssess" v-if="replyshow">
                发表
            </div>
        </div>
    </div>
</template>

<script>
    import {get, getAssessList, addAssess, edit} from '../api/api/forum.js';
    import {baseImgPath, basefile} from '@/config/env.js';
    import comments from '../components/comments'

    function formatDate(timeStamp, type = 'Y-M-D H:I:S', auto = false) {
        let time = (timeStamp + '').length === 10 ? new Date(parseInt(timeStamp) * 1000) : new Date(parseInt(timeStamp));
        let _year = time.getFullYear();
        let _month = (time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1);
        let _date = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
        let _hours = time.getHours() < 10 ? '0' + time.getHours() : time.getHours();
        let _minutes = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes();
        let _secconds = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds();
        let formatTime = '';
        let distinctTime = new Date().getTime() - time.getTime();

        if (auto) {
            if (distinctTime <= (1 * 60 * 1000)) {
                // console.log('一分钟以内，以秒数计算');
                let _s = Math.floor((distinctTime / 1000) % 60);
                formatTime = _s + '秒前';
            } else if (distinctTime <= (1 * 3600 * 1000)) {
                // console.log('一小时以内,以分钟计算');
                let _m = Math.floor((distinctTime / (60 * 1000)) % 60);
                formatTime = _m + '分钟前';
            } else if (distinctTime <= (24 * 3600 * 1000)) {
                // console.log('一天以内，以小时计算');
                let _h = Math.floor((distinctTime / (60 * 60 * 1000)) % 24);
                formatTime = _h + '小时前';
            } else if (distinctTime <= (30 * 24 * 3600 * 1000)) {
                let _d = Math.floor((distinctTime / (24 * 60 * 60 * 1000)) % 30);
                formatTime = _d + '天前';
                // console.log('30天以内,以天数计算');
            } else {
                // 30天以外只显示年月日
                formatTime = _year + '-' + _month + '-' + _date;
            }
        } else {

            switch (type) {
                case 'Y-M-D H:I:S':
                    formatTime = _year + '-' + _month + '-' + _date + ' ' + _hours + ':' + _minutes + ':' + _secconds;
                    break;
                case 'Y-M-D H:I:S zh':
                    formatTime = _year + '年' + _month + '月' + _date + '日  ' + _hours + ':' + _minutes + ':' + _secconds;
                    break;
                case 'Y-M-D H:I':
                    formatTime = _year + '-' + _month + '-' + _date + ' ' + _hours + ':' + _minutes;
                    break;
                case 'Y-M-D H':
                    formatTime = _year + '-' + _month + '-' + _date + ' ' + _hours;
                    break;
                case 'Y-M-D':
                    formatTime = _year + '-' + _month + '-' + _date;
                    break;
                case 'Y-M-D zh':
                    formatTime = _year + '年' + _month + '月' + _date + '日';
                    break;
                case 'Y-M':
                    formatTime = _year + '-' + _month;
                    break;
                case 'Y':
                    formatTime = _year;
                    break;
                case 'M':
                    formatTime = _month;
                    break;
                case 'D':
                    formatTime = _date;
                    break;
                case 'H':
                    formatTime = _hours;
                    break;
                case 'I':
                    formatTime = _minutes;
                    break;
                case 'S':
                    formatTime = _secconds;
                    break;
                default:
                    formatTime = _year + '-' + _month + '-' + _date + ' ' + _hours + ':' + _minutes + ':' + _secconds;
                    break;
            }
        }
        // 返回格式化的日期字符串
        return formatTime;
    }

    export default {
        props: {
            back: String,
            date: {
                default: ''
            },
            type: {
                default: ''
            },
            forumId: {
                default: ''
            },
            id: {
                default: ''
            },
            releaseUserId: {
                default: ''
            },
            name: {
                default: ''
            },
            level: {
                default: ''
            }
        },
        data() {
            return {
                replyshow: false,
                remnant: 0,
                content: '',
                statusId: sessionStorage.getItem('statusId') ? parseInt(sessionStorage.getItem('statusId')) : 0
            }
        },
        mounted() {

        },
        methods: {
            isreply() {
                this.replyshow = !this.replyshow
            },
            descInput() {
                var txtVal = this.content.length;
                this.remnant = txtVal;
            },
            clear() {
                this.content = ''
                this.remnant = 0
            },
            addAssess() {
                var that = this;
                addAssess({
                    forumId: that.forumId,
                    content: that.content,
                    releaseUserId: that.releaseUserId,
                    type: that.type,
                }).then(res => {
                    if (res.code == 200) {
                        that.$message({
                            message: '回复成功',
                            type: 'success'
                        });

                        that.referrer()

                    }
                });
            },
            deletes() {
                var that = this;
                edit({
                    id: that.forumId,
                    status: 1,
                }).then(res => {
                    if (res.code == 200) {
                        that.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        that.golist()
                    }
                });
            },
            edit(e) {
                var that = this;
                that.$router.push({
                    path: '/familyTeenagersEdit',
                    query: {
                        id: e
                    }
                })
            },
            golist() {
                var that = this;
                that.$router.push({
                    path: '/familyTeenagers',
                })
            },
            referrer() {
                this.replyshow = !this.replyshow
                this.clear()
                this.$emit('referrer', true);

            },
        },
    };
</script>

<style scoped lang="less">
    .reply-input-len {
        right: 10px;
        top: 10px;
    }

    .qingkong {
        position: absolute;
        bottom: 10px;
        right: 10px;
        color: #7995c8;
    }

    .reply-text-input {
        outline: none;
    }

    .cur {
        cursor: pointer;
    }

    .fabiao2 {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 20px;
    }

    .fabiao {
        background: #c60919;
        width: 90px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 14px;
    }
</style>
